<template>
  <Transition v-bind="options">
    <slot></slot>
  </Transition>
</template>

<script setup>
const porps = defineProps({
  transition: {
    type: Object,
    default: () => ({})
  }
})

const options = computed(() => ({
  'enter-active-class': 'animate__animated animate__fadeIn',
  'leave-active-class': 'animate__animated animate__fadeOut',
  ...porps.transition
}))
</script>
